<template>
    <div style="height: 170px">
        <el-steps :space="200" :active="1" finish-status="success">
            <el-step title="已完成"></el-step>
            <el-step title="进行中"></el-step>
            <el-step title="步骤 3"></el-step>
        </el-steps>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">@</span>
            <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
        </div>

        <div class="input-group">
            <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
            <span class="input-group-addon" id="basic-addon2">@example.com</span>
        </div>

        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
            <span class="input-group-addon">.00</span>
        </div>

        <label for="basic-url">Your vanity URL</label>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
            <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
        </div>
        <i class="el-icon-edit">ss</i>
        <i class="glyphicon glyphicon-heart">bootStarp</i>
        <div class="btn-group" role="group" aria-label="">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary" @click="test">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>
        <div>测试</div>
        <clock></clock>
    </div>
</template>
<style src="element-ui/lib/theme-chalk/index.css"></style>
<script>

    import Clock from '../WebPlatform/Test3.vue'
    export default {
        components: {
            Clock : Clock
        },
        name: "test2.vue",
        data() {
            return {
                numbertest:0,
                postData:{
                    msg:"",
                    method:"query",
                    abb:"",
                    page:"",
                    rows:""
                }
            }
        },
        watch:{
            // numbertest:'chickTime'
        },
        mounted(){
        },
        methods:{
            test:function(){
                getDataAsync("http://localhost:8084/demo/hello","post",{"entity":JSON.stringify(this.postData)},function(data){
                    console.log(data)
                })
            },
            clockNumberShow(number,obj){
                var box_1=obj.find(".box-1");
                var box_2=obj.find(".box-2");
                var box_3=obj.find(".box-3");
                var box_4=obj.find(".box-4");
                var box_5=obj.find(".box-5");
                var box_6=obj.find(".box-6");
                var box_7=obj.find(".box-7");
                if(0==number){
                    box_4.addClass("notShow")
                    box_4.siblings().removeClass("notShow")
                    // console.log(box_4.siblings())
                }else if(1==number){
                    box_3.siblings().addClass("notShow");
                    box_3.removeClass("notShow")
                    box_6.removeClass("notShow")
                }else if(2==number){
                    box_2.siblings().removeClass("notShow")
                    box_2.addClass("notShow")
                    box_6.addClass("notShow")
                }else if(3==number){
                    box_2.siblings().removeClass("notShow")
                    box_2.addClass("notShow")
                    box_5.addClass("notShow")
                }else if(4==number){
                    box_1.siblings().removeClass("notShow")
                    box_1.addClass("notShow")
                    box_5.addClass("notShow")
                    box_7.addClass("notShow")
                }else if(5==number){
                    box_3.siblings().removeClass("notShow")
                    box_5.addClass("notShow")
                    box_3.addClass("notShow")
                }else if(6==number){
                    box_3.siblings().removeClass("notShow")
                    box_3.addClass("notShow")
                }else if(7==number){
                    box_1.siblings().addClass("notShow")
                    box_1.removeClass("notShow")
                    box_3.removeClass("notShow")
                    box_6.removeClass("notShow")
                }else if(8==number){
                    box_1.siblings().removeClass("notShow")
                    box_1.removeClass("notShow")
                }else if(9==number){
                    box_5.siblings().removeClass("notShow")
                    box_5.addClass("notShow")
                }
            },
            chickTime(){
                setInterval(() => {
                    var box1=$("#box1");
                    var box2=$("#box2");
                    var box3=$("#box3");
                    var box4=$("#box4");
                    var box5=$("#box5");
                    var box6=$("#box6");
                    var myDate = new Date();
                    var h=myDate.getHours();       //获取当前小时数(0-23)
                    h=h<10?("0"+h):(h+"");
                    var m=myDate.getMinutes();     //获取当前分钟数(0-59)
                    m=m<10?("0"+m):(m+"");
                    var s=myDate.getSeconds();     //获取秒
                    s=s<10?("0"+s):(s+"");
                    var s1=s.substring(0,1);
                    var s2=s.substring(1,2);
                    this.clockNumberShow(s1,box1)
                    this.clockNumberShow(s2,box2)
                    var m1=m.substring(0,1);
                    var m2=m.substring(1,2);
                    this.clockNumberShow(m1,box3)
                    this.clockNumberShow(m2,box4)
                    var h1=h.substring(0,1);
                    var h2=h.substring(1,2);
                    this.clockNumberShow(h1,box5)
                    this.clockNumberShow(h2,box6)
                }, 1000)
                // setInterval(function (){
                //     var box1=$("#box1");
                //     var box2=$("#box2");
                //     var myDate = new Date();
                //     var h=myDate.getHours();       //获取当前小时数(0-23)
                //     var m=myDate.getMinutes();     //获取当前分钟数(0-59)
                //     var s=myDate.getSeconds()+"";     //获取秒
                //     var number=s.substring(0,1);
                // },1000)
            }
        },
        created() {
            this.chickTime();
        }
    }
</script>

<style scoped>
    .box{position: relative;width: 100px;height: 100px}
    .z-1{position: absolute;width: 50%;height: 5%;background-color:#85ce16;border-radius: 5px;}
    .z-2{position: absolute;width: 5%;height: 50%;background-color:#85ce16;border-radius: 5px;}
    .notShow{background-color:rgb(232, 245, 213)}
</style>